<template>
	<view class="body">
		<view class="demo_tops">
			<view class="demos_zuo" @click="returns">
				<span class="icon-return"></span>
			</view>
			<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">Steam设置</p>
		</view>
		<view class="lists" v-for="(item,index) in lists" :key="index" @click="bianji(index)">
			<view class="lists_left">
				<view class="imgs">

				</view>
			</view>
			<view class="lists_center">
				<span
					style="float: left;width: 45vw;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.link_url}}</span>
				<span style="color: aqua;white-space: nowrap;" v-if="item.default_switch==1">(当前账号)</span>
			</view>
			<view class="lists_right">
				<span class="icon-right"></span>
			</view>
		</view>
		<u-action-sheet cancelText="取消" @close="closes" :actions="list" @select="selectClick" :title="title"
			:show="shows"></u-action-sheet>
		<!-- <view class="" style="width: 100%;height: 30vw;">
			
		</view> -->
		<u-popup :show="show" mode="center" @close="close" @open="open" round="10">
			<view class="steams">
				<view class="title">
					<h3>添加Steam账号</h3>
				</view>
				<input class="inp" v-model="inps" type="text" placeholder="点击输入steam链接" />
				<view class="btn" @click="tijiao">提交steam链接</view>
			</view>
		</u-popup>
		<view class="lists" style="background-color: #f4f5f7;">
			<button class="btn" @click="steam">+ 添加 steam 帐号</button>
		</view>

		<!-- <view class="" style="width: 100%;height: 30vw;">
			
		</view> -->


	</view>
</template>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<script>
	export default {
		data() {
			return {
				show: false,
				inps: "",
				lists: [],
				title: '操作',
				list: [{
						name: '设为默认steam'
					},
					{
						name: '删除'
					}
				],
				shows: false,
				indexs: 0,
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		onShow() {
			this.getsteam()
			this.getSetting()
		},
		methods: {
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			closes() {
				this.shows = false
			},
			bianji(index) {
				this.shows = true
				console.log(index)
				this.indexs = index
			},
			selectClick(index) {
				console.log(index.name)
				if (index.name == "设为默认steam") {
					let data = {
						id: this.lists[this.indexs].id
					}
					uni.request({
						url: "/api/user/defaultLink",
						method: "POST",
						header: {
							'content-Type': 'application/json',
							token: uni.getStorageSync('token')
						},
						data: data,
					}).then(res => {
						console.log(res)
						location.reload()
					})
					this.shows = false
				} else if (index.name == "删除") {
					let data = {
						id: (this.lists[this.indexs].id).toString()
					}
					let token = uni.getStorageSync('token')
					console.log(token, data);
					uni.request({
						url: "api/user/delLink",
						data: data,
						method: "POST",
						header: {
							token: token
						}
					}).then(res => {
						console.log(res);
					})
					this.shows = false
				}
			},
			returns() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			moren(index) {
				// console.log(index)
				let data = {
					id: this.lists[index].id
				}
				uni.showModal({
					title: '设置默认Steam',
					content: '确定要让此账号为默认Steam吗',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: "/api/user/defaultLink",
								method: "POST",
								header: {
									'content-Type': 'application/json',
									token: uni.getStorageSync('token')
								},
								data: data,
							}).then(res => {
								console.log(res)
								location.reload()
							})

						} else {
							console.log('弹框后点取消')
						}
					}
				})

			},
			getsteam() {
				uni.request({
					url: "/api/user/user_steamlink",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					console.log("123214", res)
					this.lists = res.data.data
				})
			},
			steam() {
				this.show = true
				// let data=
				// uni.request({
				// 	url:"/api/user/user_steamlink",
				// 	method:"POST",
				// 	header:{
				// 		'content-Type': 'application/json',
				// 		token:uni.getStorageSync('token')              
				// 	},
				// 	success(res) {
				// 		console.log(res)
				// 	}
				// })
			},
			tijiao() {

				if (this.inps == '') {
					uni.showToast({
						title: "不能为空",
						icon: "none",
						duration: 2000
					})
				} else {
					let data = {
						steam_link: this.inps,
						default_switch: 1
					}
					uni.request({
						url: "/api/user/addLink",
						method: "POST",
						header: {
							'content-Type': 'application/json',
							token: uni.getStorageSync('token')
						},
						data: data
					}).then(res => {
						console.log(res)
						if (res.data.msg == "添加成功") {
							uni.showToast({
								title: "添加成功",
								icon: "none",
								duration: 2000
							})
							this.show = false
							location.reload()
						}
					})
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.body {
		width: 100vw;
		height: 100vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

	}

	.biaoti {
		width: 100%;
		height: 10vw;
		text-align: center;
		font-size: 5vw;

	}

	.demo_tops {
		width: 100%;
		height: 10vw;
		display: flex;
	}

	.demos_zuo {
		width: 15vw;
		height: 100%;
		text-align: center;
		line-height: 10vw;
		font-size: 4vw;
	}

	.lists {
		width: 90%;
		height: 18vw;
		background-color: #ffffff;
		display: flex;
		margin-top: 5vw;
		border-radius: 5vw;
	}

	.lists_left {
		width: 20%;
		height: 100%;
	}

	.imgs {
		width: 15vw;
		height: 15vw;
		margin: 0 auto;
		border-radius: 50%;
		background-color: black;
		margin-top: 1.5vw;
	}

	.lists_center {
		width: 70%;
		height: 100%;
		line-height: 18vw;
		font-size: 4vw;
		display: flex;
	}

	.lists_right {
		width: 10%;
		height: 100%;
		font-size: 7vw;
		line-height: 18vw;
		color: #ccc;
	}

	.btn {
		width: 90%;
		height: 14vw;
		/* margin-top: 10vw; */
		line-height: 14vw;
		font-size: 4vw;
		background-color: #333333;
		color: #e5e5e5;
	}

	.steams {
		padding: 20rpx;
		text-align: center;

		.title {
			margin-bottom: 20px;

			h3 {
				color: $title-color;
				font-size: 20px;
				margin: 0;
			}
		}

		.inp {
			width: calc(100% - 40px);
			height: 40rpx;
			padding: 10px 20px;
			margin-bottom: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			font-size: 16px;
		}

		.btn {
			width: 60%;
			height: 80rpx;
			font-size: 14px;
			margin: auto;
			line-height: 80rpx;
			border-radius: 20rpx;
		}
	}
</style>